<template>
  <div>
      <!--聊天输入框-->
      <!-- <div class="chat">
        <input type="text" v-model="chatMessage"  placeholder=" 请输入聊天内容"/>
        <button @click="sendMessage(chatMessage)">发送</button>
      </div>
      <br/> -->
      <!--聊天显示框-->
<!--       
      <div>
        <div class="showchat">
          <label>聊天内容</label>
          <span  @click="showAll = !showAll">{{word}}</span>
        </div>

        <div  class="chatRoom" v-if="showAll">
          <div
          v-for="(message, index) in chatMessageList"
          :key="index + 5"
          >
            <div class="message">{{ message.userName }}:{{message.chatMessage}}</div>
          </div>
        </div>
      </div>
      <br/> -->
  
      <a-row class="course_menu">
      <a-col :span="6" :key="index" v-for="(item, index) in courseDetailMenu">
        <!-- 菜单栏 -->
        <button
          :class="
            isClick == index ? 'courseDetailMenu active' : 'courseDetailMenu'
          "
          @click="changeNav(index)"
        >
          {{ item.title }}
        </button>
      </a-col>
    </a-row>
    <div class="course_content" v-if="isClick == 0">
      <a-empty v-if="resList.length == 0" />
      <!-- <leftSlider -->
      <resCard
        v-else
        v-for="item in resList"
        :key="item.hid"
        :item="item"
        :isClick="isClick"
        :courseId="courseId"
      >
      </resCard>
      <!-- </leftSlider> -->
    </div>
    <div class="course_content" v-if="isClick == 1">
      <!-- <div v-if="courseStart"> -->
      <div class="">
        <a-divider></a-divider>
        <gridView4 :gridItems="classMenu" :itemFlag.sync="flag"></gridView4>

        <a-divider style="margin-bottom: 0"></a-divider>
        <div>
          <sign v-if="flag == 1" :socket="socket"></sign>
          <test v-if="flag == 2" :socket="socket"></test>
          <random v-if="flag == 3" :socket="socket"></random>
          <file v-if="flag == 4" :socket="socket"></file>
          <vote v-if="flag == 5" :socket="socket"></vote>
          <ques v-if="flag == 6" :socket="socket"></ques>
          <race v-if="flag == 7" :socket="socket"></race>
        </div>
      </div>
    </div>

    <div class="course_content" v-if="isClick == 2">
      <a-empty v-if="homeworkList.length == 0" />
      <resCard
        v-else
        v-for="item in homeworkList"
        :key="item.hid"
        :item="item"
        :isClick="isClick"
        :courseId="courseId"
      >
      </resCard>
    </div>

    <div class="course_content" v-if="isClick == 3">
      <a-empty v-if="examList.length == 0" />
      <resCard
        v-else
        v-for="item in examList"
        :key="item.id"
        :item="item"
        :isClick="isClick"
        :courseId="courseId"
      >
      </resCard>
    </div>

    <div class="course_content" v-if="isClick == 4">
      <div class="chats" >
        <div class="chat">
          <label class="contentlabel">聊天内容</label>
          <div class="chatRoom" id="chatScroll">
          <div
          class="chatContent"
          v-for="(message, index) in chatMessageList"
          :key="index">
          <div>
          <p class="">{{ message.userName }}：{{ message.chatMessage }}</p>
          </div>
          </div>
          </div>
        </div>
        <br/><br/><br/>
          <div class="chating">
            <input type="text" v-model="chatMessage"  placeholder=" 请输入聊天内容"/>
            &nbsp;
            <button @click="sendMessage(chatMessage)">发送</button>
          </div>
        
      </div>
    </div>


  </div>
</template>

<script>
import leftSlider from "../../../components/LeftSlider.vue";
import resCard from "../../../components/student/ResCard.vue";
import gridView4 from "../../../layout/GridView4.vue";

import sign from "./class/Sign.vue";
import random from "./class/Random.vue";
import vote from "./class/Vote.vue";
import ques from "./class/Ques.vue";
import test from "./class/Test.vue";
import race from "./class/Race";
import file from "./class/File";

import { mapState, mapGetters } from "vuex";
import * as socket from "@/utils/socket";
import TRTC from "trtc-js-sdk";
import axios from "@/utils/axios";

export default {
  name: "CourseHome",
  components: {
    //leftSlider,
    resCard,
    gridView4,
    sign,
    random,
    vote,
    ques,
    test,
    file,
    race,
  },
  data() {
    return {
      // 聊天室
      showAll:false,
      chatMessage: "",
      isClick: 1,
      courseId: null,
      lessonId: "",
      flag: 0,
      socket,
      courseDetailMenu: [
        { title: "预习" },
        { title: "课堂" },
        { title: "作业" },
        { title: "考试" },
        { title: "聊天" },
      ],
    };
  },
  methods: {
    async sendMessage(chatMessage) {
      // 发送消息
      await socket.sendEvent("joinRoom", {
        actionType: "chat",
        role: "student",
        roomId: this.lessonId,
        data: {
          userName: this.studentName,
          chatMessage: chatMessage,
        },
      });
     this.chatMessage="";
     this.chatMessageList.push({
        userName: this.studentName,
        chatMessage: chatMessage
      })
     await this.$forceUpdate();   
     var div = document.getElementById('chatScroll');
     div.scrollTop = div.scrollHeight;
     //  document.getElementsByClassName("chatContent")[this.chatMessageList.length-1].scrollIntoView();
     //  var now = new Date();
     // div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';
    },
    changeNav(value) {
      this.isClick = value;
      // 点击课堂结束播放学生自己得视频
      if (value == 1) {
        this.$store.commit("student/updateVedioStatus", {});
      }
    },
    closeLive() {
      this.client
        .leave()
        .then(() => {
          console.error("退房成功 ");
          // 退房成功，可再次调用client.join重新进房开启新的通话。
        })
        .catch((error) => {
          console.error("退房失败 " + error);
          // 错误不可恢复，需要刷新页面。
        });
    },
  },
  created() {
    this.courseId = this.$route.params.id;
    this.lessonId = this.$route.query.lessonId;
    console.log("---------------");
    console.log(this.showAll);
    console.log(this.word);
  },
  mounted() {
    // 获取作业数据
    let lesson_id = this.$route.query.lessonId;
    let student_id = this.userId;
    this.$store.dispatch("student/getHomeworkList", { lesson_id, student_id });
    // 获取试卷数据
    this.$store.dispatch("student/getExamList", { lesson_id, student_id });
    
  },
  computed: {
    ...mapGetters({
      resList: "student/resList",
    }),
    ...mapState({
      chatMessageList: (state) => state.student.chatMessage,
      userId: (state) => state.public.uid,
      studentId: (state) => state.public.studentId,
      studentName: (state) => state.public.userName,
      classMenu: (state) => state.student.classMenu,
      examList: (state) => state.student.examList,
      classList: (state) => state.student.classList,
      homeworkList: (state) => state.student.homeworkList,
      openRooms: (state) => state.student.openRooms,
    }),
    courseStart() {
      return this.openRooms.some((item) => item === this.lessonId);
    },
    // word(){
    //   if(this.showAll == false){　　　　　　
    //     return '点击展开'
    //   }else{
    //     return '点击收起'
    //   }
    // }
  },
  beforeRouteLeave(to, from, next) {
    socket.sendEvent("joinRoom", {
      actionType: "leave",
      role: "student",
      roomId: this.lessonId,
      data: { studentId: this.studentId },
    });
    next();
  },
};
</script>

<style lang="scss">
#remote_stream {
  width: 100%;
  height: 300px;
  background-image: url("../../../assets/img/video/living.png");
}

.course_menu {
  width: 100%;
  margin-bottom: 2rem;
  display: flex;
  position: relative;
  float: left;
  width: 320px;
}

.courseDetailMenu {
  width: 100%;
  height: 100%;
  padding: 1.5rem 0;
  text-align: center;
  border: none;
  background-color: #f5f7fa;
  z-index: -1;
}

.courseDetailMenu:active,
.courseDetailMenu:focus {
  outline: none;
}

.active {
  background-color: #fff;
  color: #50b8ee;
}


// .showchat{
//   border:2px solid #66afe9;
//   margin-bottom:-2px; 
//   font-weight: bold;
//   width:320px
// }
// .showchat span{
//   float:right;
// }

// .chatRoom{
//   border:2px solid #66afe9; 
//   margin-bottom:-2px; 
//   width:300px;
// }
.contentlabel{
  font-weight:bold;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  position: relative;
  padding: 8px 5px;
  overflow: hidden;
  z-index: 1;
  zoom: 1;
  word-break: break-all;
}
.chats{
  width: 100%;
  height: 400px;
  top:  420px;
  float: left;
  position: absolute;
}
.chatRoom{
  overflow-y:scroll; 
  overflow-x:hidden;
  height: 370px;
  padding: 8px;
}
.chatContent{
  display: block;
  height:auto;
  word-break:break-all;
}
.chating{
  position: absolute;
  top: 400px; 
  padding: 8px;
  float: left;
}
 .chating input{
  width: 200px;
  height: 30px;
   border:2px solid;
   border-radius:25px;
 }
 .chating input:focus{
     border-color: #66afe9;
     outline: 0;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.281),0 0 8px rgba(102,175,233,.6);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.281),0 0 8px rgba(102,175,233,.6)
 }

 .chating button{
   display:inline-block;
   padding:6px 13px;
   font-size:5px;
   cursor:pointer;
   text-align:center;
   text-decoration:none;
   outline:none;
   color:#fff;
   background-color:#66afe9;
   border:none;
   border-radius:10px;
   box-shadow: 5px 5px 2px grey;
   }
   .chating button:hover{
     background-color:#46a6e6
   }
   .chating button:active{
     background-color: #46a6e6;
     box-shadow:0 5px grey;
     transform:translateY(4px)
   }



// .input{
//   width: 320px;
//   height: 30px;
//   border: 0;
//   outline: 0;
//   bottom:  0;
//   /* border: solid 1px black; */
//   background-color: rgb(234, 241, 245);
//   margin: 0px -1px -1px 0px;
// }
// .input:focus{
//   outline:  1.5px solid rgb(143, 171, 180);
// }
// .btn{
//   color: rgb(248, 239, 239);
//   bottom: 0;
//   box-sizing: border-box;
//   z-index: 2;
//   height: 30px;
//   border: 1px solid rgb(10, 10, 10);
//   border-radius: 2px;
//   padding: 0 10px 0 16px;
//   background-color: #1890ff;
// }
// .btn:active{
//   outline: red;
//   top:2px;
// }

</style>
